<template>
    <div class="worksList">
        <div class="position">
            <div class="sub"><em>Innovative expression</em>  创新表达</div>
            <div class="title">月度入围作品</div>
        </div>
    
        <el-carousel :autoplay="false" :initial-index="initIndex" indicator-position="none" class="swiper_bd" ref="mySilder">
            <el-carousel-item v-for="(item,index) in newList" :key="index">
                <ul>
                    <li v-for="(detail,index2) in item" :key="index2">
                        
                        <div class="video" v-if="detail.type == 'mp4'">
                            <video-player class="vjs-custom-skin" :options="videoParam(detail)"></video-player>
                        </div>
                        <div class="img" v-else>
                            <img :src="detail.url[0]+'&spec=1000'" :preview="index" :preview-text="detail.title" style="width:100%; height:100%;object-fit:contain;">
                        </div>

                        <div class="txt">
                            <div class="path">
                                <span v-if="detail.type == 'mp4'">视频</span>
                                <span v-if="detail.type == 'gif'">GIF</span>
                                <span v-if="detail.type == 'jpg' || detail.type == 'png'">海报</span>
                            </div>
                            <h1>{{detail.title}}</h1>
                            <div class="author">{{detail.author}}</div>
                            <div class="desc"><label>设计说明：</label>{{detail.desc}}</div>
                        </div>

                        <div class="num" v-if="index2%2 == 0">
                            <span v-if="initIndex+1 > 9 || index+1>9">
                                {{ initIndex ? initIndex+1 : index+1 }}
                            </span>
                            <span v-else>
                                0{{ initIndex ? initIndex+1 : index+1 }}
                            </span>
                        </div>
                    </li>
                </ul>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
    import { works_data } from '@/assets/js/getData';
    import { mapState } from 'vuex';
    import 'vue-video-player/src/custom-theme.css'
    import 'video.js/dist/video-js.css'
    import { videoPlayer } from 'vue-video-player'
    export default {
        name: 'innovateMain',
        data(){
            return {
                date:'',
                newList:[],
                list:[],
                initIndex:0,
            }
        },
        components: {
            videoPlayer
        },
        computed:{
            ...mapState([
                'baseInfo'
            ]),
            isLoad:function(){
                return this.baseInfo.year;
            }
        },
        watch:{
            isLoad:function(val){
                if(val){
                    this.date = this.baseInfo.year + '-' + this.baseInfo.month;
                    this.init();
                }
            },
            $route(){
                this.$refs.mySilder.setActiveItem(this.$route.params.id);
                this.$emit('getpage', {
                    page:this.$route.params.id
                })
            }
        },
        mounted(){
            if(this.$route.params.id){
                this.initIndex = parseInt(this.$route.params.id)
                this.$emit('getpage', {
                    page:this.$route.params.id
                })
            }
            if(this.baseInfo.year){
                this.date = this.baseInfo.year + '-' + this.baseInfo.month;
                this.init();
            }
        },
        methods:{
            async init(){
                const res = await works_data({data:encodeURI(JSON.stringify({yf:this.date,zplb:'1',pxfl:'1'}))});
                if(res.code == '0'){
                    this.list = res.data;
                    this.newList = this.arrChunk(this.list,2);
                }else{
                    this.$message({
                        showClose:true,
                        message: res.message,
                        type: 'error'
                    });
                }
            },
            videoParam(detail){
                let videoParam = {
                    playbackRates:[ 0.5, 1.0, 1.5, 2.0 ],
                    height: '318',
                    // fluid : true,
                    controlBar : {
                        timeDivider : true,//当前时间和持续时间的分隔符
                        durationDisplay : true,//显示持续时间
                        remainingTimeDisplay : false,//是否显示剩余时间功能
                        fullscreenToggle : true  //全屏按钮
                    },
                    sources : [{
                        type : "video/mp4",
                        src : detail.url[0]
                    }],
                    poster: detail.poster
                }
                return videoParam;
            }
        }
    }
</script>

<style scoped>
    .worksList{position: relative;height:100%;}

    .position{position: absolute;right:15px;top:10px;}
    .position .sub{line-height:20px;font-size: 12px;text-align:right;color: #7987a3;}
    .position .sub em{font-style: italic;}
    .position .title{width: 84px;line-height:24px;font-size: 14px;text-align:right;color: #353942;float:right;}

    .swiper_bd{height:100%;}
    .swiper_bd >>> .el-carousel__container{height:100%;}
    .swiper_bd >>> .el-carousel__container .el-carousel__item:after{content:"";position: absolute;width:50%;height: 100%;background: url(../../assets/img/shadow.png) no-repeat;top: 0;right: 0;z-index:1;}
    .swiper_bd >>> .el-carousel__arrow{width:60px;height:60px;font-size:24px;}
    .swiper_bd >>> .el-carousel__arrow i{font-weight:bold;}
    .swiper_bd >>> .el-carousel__arrow--left{left:40px;}
    .swiper_bd >>> .el-carousel__arrow--right{right:40px;}
    .swiper_bd ul{position: relative;z-index:9;height:100%;}
    .swiper_bd ul li{width:50%;float: left;height:100%;position: relative;}
    .swiper_bd ul li .num{color:#353942;font-size:16px;position: absolute;right:-578px;bottom:16px;font-family: SimSun Regular, SimSun Regular-Regular;line-height:20px;}
    .swiper_bd .img{width:476px;height:384px;margin:60px auto 0;}
    .swiper_bd .img img{cursor: pointer;}
    .swiper_bd .video{width:476px;height:318px;margin:96px auto 0;padding-bottom:32px;}
    .txt{width:476px;margin:0 auto;padding-top:35px;}
    .txt .path span{padding:0 8px;height: 22px;line-height:22px;background: #f1f4f7;font-size:12px;text-align:center;position: relative;display:inline-block;color: #7987a3;}
    .txt .path span:after{content:"";border-top:11px solid transparent;border-bottom:11px solid transparent;
    border-left:11px solid #f1f4f7;position: absolute;right:-11px;top:0;}
    .txt h1{font-size:32px;font-weight:400;margin-top:10px;}
    .txt .author{font-size:20px;margin-top:40px;}
    .txt .desc{color: #7987A3;line-height:22px;margin-top:16px;}
    .txt .desc label{color: #333;}
</style>